<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>antV-L7</title> 
    <style>
        html,
        body {
          overflow: hidden;
          margin: 0;
        }
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }
      </style>
</head>
<body>
    <div id="map"></div>
    <script src="./js/l7.js"></script>
    <script>
        const scene = new L7.Scene({
            id: "map",
            logoVisible: false,
            map: new L7.GaodeMap({
                center: [ 120.173104, 30.244072 ],
                pitch: 70.41138037735848,
                zoom: 17.18,
                rotation: 2.24, // 358.7459759480504
                minZoom: 14,
                style: 'dark'
            })
        });
        scene.on('loaded', () => {
            scene.on('click', (ev) => {
                var html = '<p>popup</p>';
                const popup= new L7.Popup().setLnglat(ev.lnglat).setHTML(html);
                console.log(popup);
                scene.addPopup(popup);
            });
            // fetch(
            //     './data/jzsj.json'
            // )
            //     .then(res => res.json())
            //     .then(data => {
            //     const layer = new L7.CityBuildingLayer(
            //         {
            //         zIndex: 0
            //         }
            //     );
            //     layer
            //         .source(data)
            //         .size('floor', [ 100, 3000 ])
            //         .color('rgba(242,246,250,0.5)')
            //         .style({
            //         opacity: 1.0,
            //         baseColor: 'rgba(36,16,63,0.3)',
            //         windowColor: '#0e0220',
            //         brightColor: '#08faee'
            //         });
            //     scene.addLayer(layer);
            //     });
        });
    </script>
</body>
</html>